<template>
    <div>
        <div class="item-1">
            <div class="title">订单信息</div>
            <div class="item-1-content-1">
                <div class="item-1-content-1-text">订单号：{{ detailsData.order_sn }}</div>
                <div class="item-1-content-1-text">订单状态：{{ status() }}</div>
                <div class="item-1-content-1-text">借阅时间：{{ detailsData.borrow_time }}</div>
            </div>
            <div class="item-1-content-2" v-if="detailsData.return_time">
                预计归还（归还时间）：{{ detailsData.return_time }}
            </div>
        </div>
        <div class="item">
            <div class="title">图书信息</div>
            <div class="item-2-content">
                <div class="item-2-content-left">
                    <div class="left-top">
                        <img
                            :src="detailsData.book.image"
                            class="bookImg"
                            v-if="detailsData.book.image"
                        />
                        <div>
                            <div class="left-top-text1">{{ detailsData.book.book_name }}</div>
                            <div class="left-top-text">{{ detailsData.book.author }}</div>
                            <div class="left-top-text">{{ detailsData.book.press }}</div>
                        </div>
                    </div>
                    <div class="book-text1">图书编码：{{ detailsData.book.book_no }}</div>
                    <div class="book-text" v-if="detailsData.book.type_name">
                        分类：{{ detailsData.book.type_name }}
                    </div>
                    <div class="book-text">
                        馆藏位置：{{ detailsData.book.bookshelf }}架{{ detailsData.book.arrange }}排
                    </div>
                </div>
                <div>
                    <div>图书详情：</div>
                    <div>{{ detailsData.book.content }}</div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="title">借阅人信息</div>
            <div class="item-3-content">
                <div class="item-3-content-text">姓名：{{ detailsData.name }}</div>
                <div>电话：{{ detailsData.mobile }}</div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { details } from '@/api/orderManagement'
const route = useRoute()
const router = useRouter()
const detailsData = reactive({
    order_sn: '',
    borrow_time: '',
    return_time: '',
    name: '',
    mobile: '',
    status: '',
    book: {}
})
const getDetails = async () => {
    const data = await details({
        order_id: route.query.id
    })
    detailsData.order_sn = data.order_sn
    detailsData.borrow_time = data.borrow_time
    detailsData.return_time = data.return_time
    detailsData.name = data.name
    detailsData.mobile = data.mobile
    detailsData.status = data.status
    detailsData.book = data.book
}
getDetails()
const status = () => {
    if (detailsData.status == 0) {
        return '借阅中'
    } else if (detailsData.status == 1) {
        return '已归还'
    } else {
        return '已逾期'
    }
}
</script>

<style scoped>
.item-1 {
    padding: 24px;
    background: #fff;
    border-radius: 4px;
}
.item {
    padding: 24px;
    background: #fff;
    border-radius: 4px;
    margin-top: 20px;
}
.title {
    font-weight: bold;
    font-size: 20px;
    color: #333333;
}
.item-1-content-1 {
    display: flex;
    margin-top: 16px;
}
.item-1-content-1-text {
    font-weight: 400;
    font-size: 16px;
    color: #333333;
    margin-right: 160px;
}
.item-1-content-1-lastText {
    font-weight: 400;
    font-size: 16px;
    color: #333333;
}
.item-1-content-2 {
    font-weight: 400;
    font-size: 16px;
    color: #333333;
    margin-top: 16px;
}
.item-2-content {
    display: flex;
    font-weight: 400;
    font-size: 16px;
    color: #333333;
    margin-top: 28px;
}
.item-2-content-left {
    margin-right: 200px;
}
.left-top {
    display: flex;
}
.left-top-text {
    margin-top: 10px;
}
.left-top-text1 {
    width: 400px;
}
.bookImg {
    width: 86px;
    height: 86px;
    margin-right: 16px;
}
.book-text1 {
    margin-top: 26px;
}
.book-text {
    margin-top: 16px;
}
.item-3-content {
    display: flex;
    font-weight: 400;
    font-size: 16px;
    color: #333333;
    margin-top: 20px;
}
.item-3-content-text {
    margin-right: 160px;
}
</style>
